<template>
  <section class="page-com" id="page" ref="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="left" id="leftMenu">
      <div class="row">
        <div class="title">
          <img src="../../assets/images/cultivate/menu.png" class="icon" />
          前沿资讯
        </div>
        <div
          class="row_li"
          :class="activeIndex == i ? 'active' : ''"
          v-for="(item, i) in list"
          :key="i"
          @click="openFun({ item, i })"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="bannerBox">
      <img
        src="./../researchResult/assets/images/news-action-banner.png"
        class="banner"
      />
    </div>
    <img
      src="../../assets/images/student/upTop.png"
      class="upTop"
      @click="upTop"
      id="upTop"
    />
    <div class="content-page">
      <div class="right" v-if="newsList && newsList.length > 0">
        <div class="item" v-for="(item, index) in newsList" :key="index">
          <NewsItem :item="item" @click.native="handleView(item)" />
        </div>
        <Pagination
          style="margin: 48px 0"
          :page="page"
          :limit="limit"
          :total="total"
          :pageSizes="[20, 100, 300, 500]"
          v-on:handleChildGetList="handleParentGetList"
        >
        </Pagination>
      </div>
      <el-empty style="margin: 50px 0" description="无数据" v-else></el-empty>
    </div>
    <div class="mobile-news">
      <div class="news-nav">
        <div class="news-nav-wrap" :style="{ width: newsTypeWidth + 'px' }">
          <div
            class="news-item"
            :class="activeIndex == i ? 'active' : ''"
            v-for="(item, i) in list"
            :key="i"
            @click="openFun({ item, i })"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="mobile-news-content">
        <div class="news-content-wrap" v-if="newsList && newsList.length > 0">
          <div class="news-item" v-for="(item, index) in newsList" :key="index">
            <NewsItem :item="item" @click.native="handleView(item)" />
          </div>
        </div>
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无数据"
          v-else
        />
      </div>
    </div>
    <div class="mainFooter" id="pageFooter">
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import Vue from "vue";
import {
  geStudentNewsStudyInfoPage,
  getStudentNewsStudyType,
} from "@/request/api.js";
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header";
// import vueVideoPlayer from "@/components/videoPlayer/videoPlayer.vue";
import vueMiniPlayer from "vue-mini-player";
import "vue-mini-player/lib/vue-mini-player.css";
import NewsItem from "./components/NewsItem.vue";
import Pagination from "@/views/components/pagination";
import { formatTime } from "@/utils/utils";
import { Empty } from "vant";
Vue.use(Empty);
Vue.use(vueMiniPlayer);
const TYPE = 1;
export default {
  // 组件名称
  name: "newsAction",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterMenu, NewsItem, Pagination },
  // 组件状态值
  data() {
    return {
      swiper: null,
      studentList: [],
      list: [],
      activeIndex: 0,
      total: 0,
      newsList: [],
      typeId: "",
      limit: 10,
      page: 1,
    };
  },
  created() {
    this.getStudentNewsStudyType();
  },
  mounted() {
    let pageEl = document.getElementById("page");
    pageEl.addEventListener("scroll", this.menuHidden);
  },
  beforeDestory() {
    let pageEl = document.getElementById("page");
    pageEl.removeEventListener("scroll", this.menuHidden);
  },
  // 组件方法
  methods: {
    menuHidden() {
      let leftMenu = document.getElementById("leftMenu"),
        upTop = document.getElementById("upTop"),
        footEl = document.getElementById("pageFooter");
      let cb =
          window.innerHeight -
          leftMenu.getBoundingClientRect().y -
          leftMenu.getBoundingClientRect().height,
        cb2 =
          window.innerHeight -
          upTop.getBoundingClientRect().y -
          upTop.getBoundingClientRect().height;
      let footElCb = window.innerHeight - footEl.getBoundingClientRect().y;
      if (footElCb >= cb) {
        leftMenu.style = "opacity: 0";
      } else {
        leftMenu.style = "opacity: 1";
      }
      if (footElCb >= cb2) {
        upTop.style = "opacity: 0";
      } else {
        upTop.style = "opacity: 1";
      }
    },
    async getList() {
      const { code, data } = await geStudentNewsStudyInfoPage({
        pageNo: this.page,
        pageSize: this.limit,
        type: TYPE,
        typeId: this.typeId,
      });
      if (code !== 0) {
        this.newsList = [];
        this.total = 0;
        return;
      }
      this.newsList = data.list.map((v) => {
        return {
          ...v,
          releaseTime: formatTime(new Date(v.releaseTime)),
        };
      });
      this.total = data.total;
      this.upTop();
    },
    async getStudentNewsStudyType() {
      const { code, data } = await getStudentNewsStudyType({
        type: TYPE,
      });
      if (code !== 0) {
        this.list = [];
        return;
      }
      const list = data.map((v) => {
        return {
          ...v,
          releaseTime: formatTime(new Date(v.releaseTime)),
        };
      });
      this.list = list;
      /* 模拟数据，避免这里走不通，暂时注释此行代码 */
      this.typeId = this.list[0].id;
      this.getList();
    },
    handleParentGetList(page, limit) {
      this.page = page;
      this.limit = limit;
      this.getList();
    },
    handleView(item) {
      this.$router.push({
        path: "/newsActionDetail",
        query: { id: item.id },
      });
    },
    openFun({ item, i }) {
      this.activeIndex = i;
      this.typeId = item.id;
      this.getList();
    },
    upTop() {
      this.$refs.page.scrollTo(0, 0);
    },
  },
  computed: {
    // 计算tabbar选项卡的宽度
    newsTypeWidth: function () {
      return this.list.length * 86;
    },
  },
};
</script>
<style lang="less" scoped>
.page-com {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgb(237, 242, 249);
  padding-top: 80px;
  .upTop {
    width: 46px;
    position: fixed;
    bottom: 107px;
    right: calc((100% - 1200px) / 2 - 78px);
    cursor: pointer;
    transition-duration: 0.3s;
  }
  .bannerBox {
    width: 100%;
    position: relative;
    height: 170px;
    overflow-x: hidden;
    overflow: hidden;
    .banner {
      width: 100%;
      object-fit: cover;
      height: 100%;
      display: block;
      position: absolute;
      z-index: 2;
    }
    &::after {
      content: "";
      height: 220px;
      position: absolute;
      top: 0;
      z-index: 1;
      background: rgb(229, 235, 246);
      width: 100%;
      left: 0;
    }
  }
}
.left {
  width: 240px;
  max-height: 600px;
  overflow: auto;
  position: fixed;
  left: calc((100% - 1200px) / 2 - 70px);
  top: 281px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.18);
  padding: 48px 0 20px 20px;
  background: #fff;
  border-radius: 8px;
  transition: all 0.6s;
  opacity: 1;
  z-index: 5;
  .row {
    width: 100%;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383d;
    line-height: 21px;
    // height: 52px;
    transition-duration: 0.3s;
    overflow-y: hidden;
    &:hover {
      height: auto;
      .title {
        border-bottom: 1px solid #d4d6da;
        .icon2 {
          transform: rotate(90deg);
        }
      }
    }
    .title {
      margin-bottom: 35px;
      padding-left: 40px;
      padding-bottom: 30px;
      position: relative;
      font-weight: bold;
      border-bottom: 1px solid #d4d6da;
      .icon {
        position: absolute;
        left: 0;
        top: 0;
        max-width: 20px;
      }
      .icon2 {
        position: absolute;
        right: 20px;
        height: 20px;
        transition-duration: 0.3s;
        top: 0;
      }
    }
    .row_li {
      width: calc(100% - 20px);
      padding: 0 40px;
      cursor: pointer;
      height: 44px;
      position: relative;
      margin-bottom: 5px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      transition-duration: 0.3s;
      .row_li_icon {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 20px;
      }
      &:last-child {
        .row_li_icon {
          width: 17px;
        }
      }
      &:hover,
      &.active {
        color: #15539a;
        background: #e1f2fd;
        font-size: 16px;
        font-weight: 600;
        // border: 1px solid #daebff;
      }
    }
  }
}
.content-page {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  min-height: calc(100vh - 630px);
  padding-left: 230px;
  .right {
    padding: 30px 0;
    .steps {
      width: 100%;
      font-size: 18px;
      font-family: AlibabaPuHuiTi_2_45_Light;
      font-weight: 400;
      color: #16539a;
      line-height: 18px;
      margin-bottom: 16px;
      text-align: right;
      span {
        &:first-child {
          cursor: pointer;
        }
      }
    }
    .item {
      width: 100%;
      margin-bottom: 30px;
      background: #ffffff;
      font-family: AlibabaPuHuiTi_2_35_Thin;
      border-top: 1px rgb(230, 230, 230) solid;
      border-bottom: 1px rgb(230, 230, 230) solid;
      font-weight: 400;
      border-radius: 4px;
      background: white;
      box-sizing: border-box;
      border: 1px solid #eee;
    }
  }
}
@media screen and (max-height: 820px) {
  .row_li {
    margin-bottom: 10px !important;
  }
}
@media (min-width: 769px) {
  .mobile-news {
    display: none;
  }
}
@media (max-width: 768px) {
  .left,
  .bannerBox,
  .header-com,
  .upTop,
  .content-page {
    display: none;
  }
  .page-com {
    padding-top: 0px;
  }

  .news-nav {
    width: 100%;
    position: fixed;
    top: 0.54rem;
    left: 0;
    overflow: scroll;
    background-color: #FFFFFF;
    .news-nav-wrap {
      display: flex;
      padding: 0.12rem 0 0.12rem 0.1rem;
      .news-item {
        width: 0.76rem;
        height: 0.31rem;
        text-align: center;
        font-size: 0.13rem;
        line-height: 0.31rem;
        border-radius: 0.16rem;
        color: #3d6cb0;
        background-color: rgba(61, 108, 176, 0.1);
        margin-right: 0.1rem;
      }
      .active {
        color: #ffffff;
        background-color:#3d6cb0;
      }
    }
  }
  .mobile-news-content {
    background: #ffffff;
    padding-top: 1.17rem;
  }
  ::-webkit-scrollbar {
    display: none;
  } 
}
</style>
